<template>
    <div class='surgeryRecord'>
        <div v-if="!medicalRecord || medicalRecord.length===0">
          暂无数据
        </div>
        <el-tabs v-model="activeTab" type="card" v-else>
            <!-- <el-tab-pane name="outpatient">
                <span slot="label">门诊</span>
                <outpatient></outpatient>
            </el-tab-pane> -->
            <el-tab-pane v-for ='(record,index) in medicalRecord' :key = 'record.id' :name="'tab_'+index">
                <span slot="label">{{record.type === 1 ? '住院' : '门诊'}}<br>{{record.visitTime}}</span>
                <!-- <in-hospital></in-hospital> -->
                <!--<component :is="tab.name === 'outpatient' ? 'outpatient' : 'inHospital' "/>-->
              <outpatient v-if="record.type === 0" :record="record"></outpatient>
              <in-hospital v-if="record.type === 1" :record="record"></in-hospital>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import surgeryInfo from '@/yimiviews/case/surgeryInfo'
import outpatient from '@/yimiviews/case/outpatient'
import inHospital from '@/yimiviews/case/inHospital'
export default {
  components: { surgeryInfo, outpatient, inHospital },
  props: {
    medicalRecord: {
      type: Array
    }
  },
  data() {
    return {
      activeTab: 'tab_0'
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
@import "../../styles/case.scss";
.header {
  background-color: #f0f2f5;
  padding: 10px;
  margin: -20px -10px 10px;
  font-weight: 500;
  color: #000;
}
.title {
  padding: 15px 0;
  color: #333;
}
.el-row {
  padding: 5px 0;
}
</style>


